<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
input#horizontal {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 240px;
}
</style>

<body>
<input id="horizontal" type="range" min="0" max="180" step="2">
<script src="../../d3.js"></script>

<script>
var width = 960,height = 960;
var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);


var projection = d3.geo.orthographic()
	.translate([250,250]);
var path = d3.geo.path()
	.projection(projection);

d3.select("input#horizontal").on("change", function() {
	  var value = this.value;
	  var circle = d3.geo.circle().angle([value]);

	  svg.append("path")
	  .datum(circle)
	  .attr("stroke","#000")
	  .attr("fill","none")
	  .attr("stroke-width","2")
	  .attr("d", path);

});
</script>